import React from "react";
import { Row, Col, Table, message, Button, Form, Input, Radio } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from "antd/lib/form/Form";

interface IProps extends FormComponentProps {
  dispatch?: Function,
  children?: React.ReactNode,
  loading?: boolean
}


@connect(({ archives_unit, loading }) => ({
  data: archives_unit.data,
  // loading: loading.effects['/'],
}))
class Person extends React.PureComponent<IProps, any> {
  state = {
    value: null,
    manageValue: null,
    securityValue: null,
  }

  componentDidMount() {
    
  }
  
  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };
  onManageChange = (e) => {
    this.setState({
      manageValue: e.target.value,
    });
  };
  onSecurityChange = (e) => {
    this.setState({
      securityValue: e.target.value,
    });
  }

  uploadFile(e) {
    e.persist();
    const { dispatch } = this.props;
    // const { p_id } = this.state;
    // const targetFile = e.target.files[0];
    // dispatch({ type: 'upload/uploadFile', payload: targetFile })
    //   .then(() => {
    //     message.loading('', 3);
    //     this.props.file.message === 'success' && dispatch({
    //       type: 'device_host_sub/deviceImport',
    //       payload: { url: this.props.file.url, parentId: p_id }
    //     }).then((response) => {
    //       response && this.setState({
    //         visible: true,
    //         modalText: response,
    //       })
    //     })
    //   })
  }

  uploadManageFile(e) {

  }

  handleSubmit = e => {
    e.preventDefault();

    const { form, dispatch } = this.props;

    form.validateFields((err, values) => {
      if (!err) {

      }
    })
  }

  render() {
    const { form } = this.props;

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const longLabelLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const radioLayout = {
      labelCol: { span: 14 },
      wrapperCol: { span: 10 },
    };
    return (
      <Form style={{marginTop:'30px'}} onSubmit={this.handleSubmit}>
        <Row>
          <Col key={1} span={5}>
            <Form.Item
              label="消防安全责任人"
              {...longLabelLayout}
            >
              {getFieldDecorator('person')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={4}>
            <Form.Item
              label="职务"
              {...formItemLayout}
            >
              {getFieldDecorator('staff')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4}>
            <Form.Item
              label="联系电话"
              {...formItemLayout}
            >
              {getFieldDecorator('phone')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={4} span={6}>
            <Form.Item
              label="是否经过专门消防培训"
              {...radioLayout}
            >
              <Radio.Group onChange={this.onChange} value={this.state.value}>
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col key={5} span={4}>
            <Form.Item>
              {getFieldDecorator('files')(
                <input style={{ opacity: 0, width: 150, zIndex: 10, position: 'absolute', cursor: 'pointer' }}
                  onChange={(e) => {
                    this.uploadFile(e)
                  }}
                  onClick={(event) => { event.target.value = null }}
                  type='file'
                />
              )}
              <Button type="link" icon="plus">上传消防安全责任书</Button>
              <a href=""
                download="消防安全责任书"
              >
                <Button type="primary" style={{ marginLeft: '20px', marginTop: '-20px' }}>模板下载</Button>
              </a>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col key={1} span={5}>
            <Form.Item
              label="消防安全管理人"
              {...longLabelLayout}
            >
              {getFieldDecorator('manage')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={4}>
            <Form.Item
              label="职务"
              {...formItemLayout}
            >
              {getFieldDecorator('managestaff')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4}>
            <Form.Item
              label="联系电话"
              {...formItemLayout}
            >
              {getFieldDecorator('managephone')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={4} span={6}>
            <Form.Item
              label="是否经过专门消防培训"
              {...radioLayout}
            >
              <Radio.Group onChange={this.onManageChange} value={this.state.manageValue}>
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col key={5} span={4}>
            <Form.Item>
              {getFieldDecorator('managefiles')(
                <input style={{ opacity: 0, width: 150, zIndex: 10, position: 'absolute', cursor: 'pointer' }}
                  onChange={(e) => {
                    this.uploadManageFile(e)
                  }}
                  onClick={(event) => { event.target.value = null }}
                  type='file'
                />
              )}
              <Button type="link" icon="plus">上传消防安全管理人任命书</Button>
              <a href=""
                download="消防安全管理人任命书"
              >
                <Button type="primary" style={{ marginLeft: '20px', marginTop: '-20px' }}>模板下载</Button>
              </a>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col key={1} span={5}>
            <Form.Item
              label="保安队长"
              {...longLabelLayout}
            >
              {getFieldDecorator('securityperson')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={2} span={4}>
            <Form.Item
              label="职务"
              {...formItemLayout}
            >
              {getFieldDecorator('securitystaff')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={3} span={4}>
            <Form.Item
              label="联系电话"
              {...formItemLayout}
            >
              {getFieldDecorator('securityphone')(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
          <Col key={4} span={6}>
            <Form.Item
              label="是否经过专门消防培训"
              {...radioLayout}
            >
              <Radio.Group onChange={this.onSecurityChange} value={this.state.securityValue}>
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col key={5} span={4} />
        </Row>
        <Button style={{marginLeft:'5%', marginTop:'10%'}} type="primary">保存</Button>
      </Form>
    )
  }
}


const Persons = Form.create<IProps>()(Person);
export default Persons;